<template>
  <div class="page-container">
    <!-- 顶部导航栏 -->
    <TopNav />

    <!-- 操作按钮区域 -->
    <div class="action-bar">
      <el-row :gutter="15" align="middle">
        <!-- 搜索框 -->
        <el-col :span="8">
          <el-input
            v-model="searchName"
            placeholder="请输入报告人姓名"
            clearable
            style="width: 100%;"
            size="large"
          />
        </el-col>
        
        <!-- 按钮组 -->
        <el-col :span="16" class="button-group">
          <el-button 
            type="info" 
            size="large" 
            icon="Search" 
            @click="handleSearch"
          >
            查询
          </el-button>

          <!-- <el-button 
            type="primary" 
            size="large" 
            icon="Download" 
            @click="showImportDialog"
          >
            导入
          </el-button> -->
          
          <el-button 
            type="success" 
            size="large" 
            icon="Plus" 
            @click="showAddDialog"
          >
            新增
          </el-button>
        </el-col>
      </el-row>
    </div>

    <div class="card-container">
      <div class="table-wrapper">
        <el-table :data="reportList" border class="full-height-table"
            :header-cell-style="{ background: '#f0f0f0' }">
          <!-- 序号列 -->
          <el-table-column type="index" label="序号" align="center" width="60">
            <template #default="scope">
              {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
            </template>
          </el-table-column>
          
          <el-table-column prop="report_name" label="报告人姓名" align="center" width="120"></el-table-column>
          <el-table-column prop="unit" label="单位" align="center" width="180"></el-table-column>
          <el-table-column prop="position" label="职务" align="center" width="170"></el-table-column>
          <el-table-column prop="gender" label="性别" align="center" width="70"></el-table-column>
          <el-table-column prop="phone_number" label="手机号码" align="center" width="150"></el-table-column>
          <el-table-column prop="id_number" label="身份证号" align="center" width="210"></el-table-column>
          <el-table-column prop="political_status" label="政治面貌" align="center" width="120"></el-table-column>
          <el-table-column prop="serious_illness" label="是否身患重大疾病" align="center" width="180"></el-table-column>
          <el-table-column prop="marital_status" label="婚姻情况" align="center" width="100"></el-table-column>
          <el-table-column prop="registered_address" label="户籍地址" align="center" width="300"></el-table-column>
          <el-table-column label="操作" align="center" fixed="right">
            <template #default="scope">
              <el-button 
                size="small" 
                :icon="Edit" 
                @click="handleEdit(scope.row)" 
              />
              <el-button 
                size="small" 
                :icon="Delete" 
                @click="handleDelete(scope.row.id)" 
              />
            </template>
          </el-table-column>
        </el-table>
        
        <!-- 分页组件 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>

    <!-- 新增/编辑对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="80%" top="5vh">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="200px">
        <el-row :gutter="20">
          <!-- 第一列：基本信息 -->
          <el-col :span="8">
            <el-divider content-position="left">基本信息</el-divider>
            <el-form-item label="报告人姓名" prop="report_name">
              <el-input v-model="form.report_name" placeholder="请输入报告人姓名" />
            </el-form-item>
            <el-form-item label="单位" prop="unit">
              <el-input v-model="form.unit" placeholder="请输入单位" />
            </el-form-item>
            <el-form-item label="职务" prop="position">
              <el-input v-model="form.position" placeholder="请输入职务" />
            </el-form-item>
            <el-form-item label="性别" prop="gender">
              <el-select v-model="form.gender" placeholder="请选择性别">
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
              </el-select>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone_number">
              <el-input v-model="form.phone_number" placeholder="请输入手机号码" />
            </el-form-item>
            <el-form-item label="身份证号" prop="id_number">
              <el-input v-model="form.id_number" placeholder="请输入身份证号" />
            </el-form-item>
            <el-form-item label="政治面貌" prop="political_status">
              <el-select v-model="form.political_status" placeholder="请选择政治面貌" filterable>
                <el-option 
                      v-for="status in political_statuses" 
                      :key="status" 
                      :label="status" 
                      :value="status" 
                    />
              </el-select>
            </el-form-item>
            <el-form-item label="是否身患重大疾病" prop="serious_illness">
              <el-select v-model="form.serious_illness" placeholder="请选择">
                <el-option label="是" value="是" />
                <el-option label="否" value="否" />
              </el-select>
            </el-form-item>
            <el-form-item label="婚姻情况" prop="marital_status">
              <el-select v-model="form.marital_status" placeholder="请选择婚姻情况">
                <el-option
                      v-for="status in marital_statuses"
                      :key="status"
                      :label="status"
                      :value="status"
                  />
              </el-select>
            </el-form-item>
            <el-form-item label="户籍地具体地址" prop="registered_address">
              <el-input v-model="form.registered_address"
                type="textarea" 
                :rows="3"  
                placeholder="请输入户籍地具体地址" />
            </el-form-item>
          </el-col>

          <!-- 第二列：详细情况 -->
          <el-col :span="16">
            <el-divider content-position="left">个人有关事项</el-divider>
            <el-form-item label="本人取得普通护照、往来港澳通行证等情况">
              <el-input 
                v-model="form.passport_and_permits_info" 
                type="textarea" 
                :rows="3" 
                placeholder="请输入本人取得普通护照、往来港澳通行证等情况，因私取得大陆居民往来台湾通行证情况" 
              />
            </el-form-item>
            <el-form-item label="本人因私设立使用国（境）外社交媒体账号情况">
              <el-input 
                v-model="form.overseas_social_media_info" 
                type="textarea" 
                :rows="3" 
                placeholder="请输入本人因私设立使用国（境）外社交媒体账号情况" 
              />
            </el-form-item>
            <el-form-item label="子女与外国人、无国籍人、港澳台居民通婚的情况">
              <el-input 
                v-model="form.children_international_marriage_info" 
                type="textarea" 
                :rows="3" 
                placeholder="请输入子女与外国人、无国籍人、港澳台居民通婚的情况" 
              />
            </el-form-item>
            <el-form-item label="配偶子女移居国（境）外等情况">
              <el-input 
                v-model="form.family_overseas_residency_info" 
                type="textarea" 
                :rows="3" 
                placeholder="请输入配偶、子女移居国（境）外，或者虽未移居国（境）外但连续在国（境）外工作、学习、生活1年以上情况" 
              />
            </el-form-item>
            <el-form-item label="配偶子女及其配偶受聘担任私营企业高级职务等情况">
              <el-input 
                v-model="form.family_business_positions_info" 
                type="textarea" 
                :rows="3" 
                placeholder="请输入配偶、子女及其配偶受聘担任私营企业高级职务，在外商独资企业、中外合资企业、国（境）外组织在境内设立的代表机构中担任由外方或者合资的私营企业委派、聘任的高级职务，以及到国（境）外从业，受组织委派到国（境）外工作等情况" 
              />
            </el-form-item>
            <el-form-item label="本人配偶子女及其配偶被司法机关追究刑事责任等情况">
              <el-input 
                v-model="form.legal_and_disciplinary_actions" 
                type="textarea" 
                :rows="3" 
                placeholder="请输入本人、配偶、子女及其配偶被司法机关追究刑事责任或者被监察机关留置等情况" 
              />
            </el-form-item>
            <el-form-item label="本人涉嫌违规违纪违法犯罪问题等情况">
              <el-input 
                v-model="form.investigation_and_interrogation_info" 
                type="textarea" 
                :rows="3" 
                placeholder="请输入本人涉嫌违规违纪违法犯罪问题等情况(接受纪检监察机关、检察机关、公安机关等谈话、询问、讯问，且已作出明确结论的情况（谈话、询问、讯问机构明确需要保密的，有关案件结案后应当及时报告）)" 
              />
            </el-form-item>
            <el-form-item label="本人或者配偶列为失信被执行人的情况">
              <el-input 
                v-model="form.dishonest_person_status" 
                type="textarea" 
                :rows="3" 
                placeholder="请输入本人或者配偶列为失信被执行人的情况" 
              />
            </el-form-item>
            <el-form-item label="亲属基本信息">
              <el-input 
                v-model="form.relatives_basicInfro" 
                type="textarea" 
                :rows="3" 
                placeholder="请输入亲属基本信息(包括配偶、子女、子女配偶的姓名、单位职务、身份证号、是否在国（境）外)" 
              />
            </el-form-item>
            <el-form-item label="本人、配偶、共同生活的子女在国（境）内外的房产情况">
              <el-input 
                v-model="form.relatives_houseInfro" 
                type="textarea" 
                :rows="3" 
                placeholder="请输入房产情况信息(包括产权人姓名、具体地址、建筑面积(㎡)、产权性质、获得方式、交易时间(年月))" 
              />
            </el-form-item>
            <el-form-item label="本人近亲属在铁路系统内工作情况">
              <el-input 
                v-model="form.relatives_workin_railway" 
                type="textarea" 
                :rows="3" 
                placeholder="请输入本人近亲属在铁路系统内工作情况(包括称谓、姓名、出生日期、工作单位、职务)" 
              />
            </el-form-item>
            <el-form-item label="其他需要报告事项">
              <el-input 
                v-model="form.other_matters" 
                type="textarea" 
                :rows="3" 
                placeholder="请输入其他需要报告的事项" 
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </template>
    </el-dialog>

    <!-- 导入Excel -->
    <el-dialog v-model="importDialogVisible" title="导入新提拔领导人员报告" width="40%">
      <el-upload
        class="upload-excel"
        action="#"
        :file-list="fileList"
        :auto-upload="false"
        :on-change="handleFileChange"
        accept=".xlsx,.xls"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将Excel文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">仅支持.xlsx格式文件，需与模板字段一致</div>
      </el-upload>
      <template #footer>
        <el-button @click="importDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitImport">确认导入</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { Delete, Edit } from '@element-plus/icons-vue';
import TopNav from './navmenu.vue'
import { onMounted, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import dbClient from '../../utils/database.js'
import * as XLSX from 'xlsx';

const political_statuses = import.meta.env.VITE_POLITICAL_STATUSES?.split(',') || [];
const marital_statuses = import.meta.env.VITE_MARITAL_STATUSES?.split(',') || [];
// 导入相关响应式数据
const importDialogVisible = ref(false);
const fileList = ref([]);
let selectedFile = null;

// 搜索相关响应式数据
const searchName = ref('');

// 分页相关响应式数据
const pagination = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

// 报告列表
const reportList = ref([]);
const dialogVisible = ref(false);
const dialogTitle = ref('');
const form = ref({
  // 基本信息
  report_name: '',
  unit: '',
  position: '',
  gender: '',
  phone_number: '',
  id_number: '',
  political_status: '',
  serious_illness: '',
  marital_status: '',
  registered_address: '',
  
  // 个人有关事项
  passport_and_permits_info: '',
  overseas_social_media_info: '',
  children_international_marriage_info: '',
  family_overseas_residency_info: '',
  family_business_positions_info: '',
  legal_and_disciplinary_actions: '',
  investigation_and_interrogation_info: '',
  dishonest_person_status: '',
  
  // JSON格式信息
  relatives_basicInfro: '',
  relatives_houseInfro: '',
  relatives_workin_railway: '',
  other_matters: ''
});
const formRef = ref(null);

const rules = {
  report_name: [
    { required: true, message: '请输入报告人姓名', trigger: 'blur' }
  ],
  unit: [
    { required: true, message: '请输入单位', trigger: 'blur' }
  ],
  position: [
    { required: true, message: '请输入职务', trigger: 'blur' }
  ],
  phone_number: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    {
      pattern: /^1[3-9]\d{9}$/, 
      message: '请输入正确的11位手机号码', 
      trigger: 'blur' 
    }
  ],
  id_number: [
    { required: true, message: '请输入身份证号', trigger: 'blur' },
    { 
      pattern: /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, 
      message: '请输入正确的18位身份证号', 
      trigger: 'blur' 
    }
  ],
};

// 字段映射：Excel列名 -> 数据库表字段名
const fieldMap = {
  '报告人姓名': 'report_name',
  '单位': 'unit',
  '职务': 'position',
  '性别': 'gender',
  '手机号码': 'phone_number',
  '身份证号': 'id_number',
  '政治面貌': 'political_status',
  '本人是否身患重大疾病': 'serious_illness',
  '婚姻情况': 'marital_status',
  '户籍地具体地址': 'registered_address',
  '本人取得普通护照、往来港澳通行证等情况': 'passport_and_permits_info',
  '本人因私设立使用国（境）外社交媒体账号情况': 'overseas_social_media_info',
  '子女与外国人、无国籍人、港澳台居民通婚的情况': 'children_international_marriage_info',
  '配偶子女移居国（境）外等情况': 'family_overseas_residency_info',
  '配偶子女及其配偶受聘担任私营企业高级职务等情况': 'family_business_positions_info',
  '本人配偶子女及其配偶被司法机关追究刑事责任等情况': 'legal_and_disciplinary_actions',
  '本人涉嫌违规违纪违法犯罪问题等情况': 'investigation_and_interrogation_info',
  '本人或者配偶列为失信被执行人的情况': 'dishonest_person_status',
  '亲属基本信息': 'relatives_basicInfro',
  '房产情况信息': 'relatives_houseInfro',
  '在铁路系统工作情况': 'relatives_workin_railway',
  '其他需要报告的事项': 'other_matters'
};

// 显示导入对话框
const showImportDialog = () => {
  importDialogVisible.value = true;
  fileList.value = [];
  selectedFile = null;
};

// 选择文件变化时触发
const handleFileChange = (uploadFile) => {
  fileList.value = [uploadFile];
  selectedFile = uploadFile.raw;
};

// 页面加载时获取数据
onMounted(() => {
  getReportList();
});

// 处理搜索
const handleSearch = () => {
  pagination.value.currentPage = 1; // 搜索时重置到第一页
  getReportList();
};

// 获取报告列表
const getReportList = async () => {
  try {
    let query = 'SELECT * FROM new_leader_report';
    let countQuery = 'SELECT COUNT(*) as total FROM new_leader_report';
    let params = [];
    
    if (searchName.value && searchName.value.trim()) {
      const whereClause = ' WHERE report_name LIKE ?';
      query += whereClause;
      countQuery += whereClause;
      params.push(`%${searchName.value.trim()}%`);
    }
    
    // 添加排序
    query += ' ORDER BY created_at DESC';
    
    // 添加分页
    const offset = (pagination.value.currentPage - 1) * pagination.value.pageSize;
    query += ` LIMIT ${pagination.value.pageSize} OFFSET ${offset}`;
    
    // 获取总数
    const countResult = await dbClient.query(countQuery, params);
    pagination.value.total = countResult[0].total;
    
    // 获取分页数据
    const data = await dbClient.query(query, params);
    reportList.value = data;
  } catch (error) {
    console.error('获取新提拔领导人员报告列表失败:', error);
    ElMessage.error('获取新提拔领导人员报告列表失败: ' + error.message);
  }
};

// 处理分页大小变化
const handleSizeChange = (newSize) => {
  pagination.value.pageSize = newSize;
  pagination.value.currentPage = 1; // 页数大小改变时重置到第一页
  getReportList();
};

// 处理当前页变化
const handleCurrentChange = (newPage) => {
  pagination.value.currentPage = newPage;
  getReportList();
};

// 显示新增对话框
const showAddDialog = () => {
  dialogTitle.value = '新增新提拔领导人员报告';
  form.value = {
    report_name: '',
    unit: '',
    position: '',
    gender: '',
    phone_number: '',
    id_number: '',
    political_status: '',
    serious_illness: '',
    marital_status: '',
    registered_address: '',
    passport_and_permits_info: '',
    overseas_social_media_info: '',
    children_international_marriage_info: '',
    family_overseas_residency_info: '',
    family_business_positions_info: '',
    legal_and_disciplinary_actions: '',
    investigation_and_interrogation_info: '',
    dishonest_person_status: '',
    relatives_basicInfro: '',
    relatives_houseInfro: '',
    relatives_workin_railway: '',
    other_matters: ''
  };
  dialogVisible.value = true;
};

// 显示编辑对话框
const handleEdit = (row) => {
  dialogTitle.value = '编辑新提拔领导人员报告';
  form.value = { ...row };
  dialogVisible.value = true;
};

// 删除记录
const handleDelete = async (id) => {
  try {
    await ElMessageBox.confirm('是否要删除当前行数据？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });
    
    await dbClient.delete('DELETE FROM new_leader_report WHERE id = ?', [id]);
    ElMessage.success('删除成功');
    getReportList();
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error);
      ElMessage.error('删除失败: ' + error.message);
    }
  }
};

// 提交表单
const submitForm = async () => {
  try {
    // 先进行表单验证
    await formRef.value.validate();
  } catch (error) {
    console.log('表单验证失败:', error);
    return;
  }

  // 验证身份证号是否存在于领导人员基本情况表中
  const idNumber = form.value.id_number;
  
  // 验证身份证号是否已存在（编辑时排除当前记录）
  const existingReport = await dbClient.query(
    'SELECT id FROM new_leader_report WHERE id_number = ?',
    [idNumber]
  );

  if (form.value.id) {
    // 编辑模式，排除当前记录
    const existingRecord = existingReport.find(item => item.id !== form.value.id);
    if (existingRecord) {
      ElMessage.warning('此身份证号已存在其他报告中，请修改');
      return;
    }
  } else {
    // 新增模式，直接检查是否存在
    if (existingReport.length > 0) {
      ElMessage.warning('此身份证号已存在其他报告中，请修改');
      return;
    }
  }

  // 处理表单数据
  const formData = { ...form.value };

  // 提取字段名和值
  const fields = Object.keys(formData).filter(key => key !== 'id');
  const values = fields.map(key => formData[key]);

  try {
    if (formData.id) {
      // 编辑：更新数据
      const setClause = fields.map(field => `${field} = ?`).join(', ');
      const updateValues = [...values, formData.id];
      await dbClient.update(
        `UPDATE new_leader_report SET ${setClause} WHERE id = ?`,
        updateValues
      );
      ElMessage.success('更新成功');
    } else {
      // 新增：插入数据
      const placeholders = fields.map(() => '?').join(',');
      await dbClient.insert(
        `INSERT INTO new_leader_report (${fields.join(', ')}) VALUES (${placeholders})`,
        values
      );
      ElMessage.success('新增成功');
    }

    dialogVisible.value = false;
    getReportList();
  } catch (error) {
    console.error('保存失败:', error);
    ElMessage.error('保存失败: ' + error.message);
  }
};

// 提交导入数据
const submitImport = async () => {
  if (!selectedFile) {
    ElMessage.warning('请选择要导入的Excel文件');
    return;
  }
  
  try {
    // 解析Excel文件
    const fileReader = new FileReader();
    fileReader.readAsBinaryString(selectedFile);
    fileReader.onload = async (event) => {
      const workbook = XLSX.read(event.target.result, { type: 'binary' });
      const worksheet = workbook.Sheets[workbook.SheetNames[0]];
      const excelData = XLSX.utils.sheet_to_json(worksheet);
      
      if (excelData.length === 0) {
        ElMessage.warning('Excel文件中无数据');
        return;
      }

      // 数据处理：字段映射
      const importData = [];
      for (const item of excelData) {
        const formattedItem = {};
        let isItemValid = true;

        // 字段映射（Excel列名 → 数据库表字段）
        Object.keys(fieldMap).forEach(excelField => {
          const dbField = fieldMap[excelField];
          formattedItem[dbField] = item[excelField] || '';
        });

        // 保留有效数据
        if (isItemValid) {
          importData.push(formattedItem);
        }
      }

      // 验证必填字段
      const requiredFields = ['report_name', 'unit', 'position', 'id_number'];
      const validData = importData.filter(item => {
        const hasAllRequired = requiredFields.every(field => {
          const rawValue = item[field];
          const processedValue = rawValue === undefined || rawValue === null ? '' : String(rawValue).trim();
          return processedValue !== '';
        });

        if (!hasAllRequired) {
          const missingFields = requiredFields.filter(field => {
            const rawValue = item[field];
            const processedValue = rawValue === undefined || rawValue === null ? '' : String(rawValue).trim();
            return processedValue === '';
          });
          ElMessage.warning(`数据【${item.report_name || '未知人员'}】缺少必填字段：${missingFields.join('、')}，已过滤`);
        }
        return hasAllRequired;
      });

      const invalidCount = importData.length - validData.length;
      if (invalidCount > 0) {
        ElMessage.warning(`共${invalidCount}条数据无效（缺少必填项），已过滤`);
      }
      if (validData.length === 0) {
        ElMessage.error('无有效数据可导入');
        return;
      }

      // 额外验证（唯一性）
      const finalValidData = [];
      for (const item of validData) {
  
        // 验证身份证号唯一性
        const idNumberCheck = await dbClient.query(
          'SELECT id FROM new_leader_report WHERE id_number = ?',
          [item.id_number]
        );
        if (idNumberCheck.length > 0) {
          ElMessage.warning(`数据【${item.report_name}】的身份证号已存在，已过滤`);
          continue;
        }

        finalValidData.push(item);
      }

      if (finalValidData.length === 0) {
        ElMessage.error('无有效数据可导入（身份证号不存在或重复）');
        return;
      }

      // 批量导入数据库
      try {
        const fields = Object.values(fieldMap);
        const placeholders = fields.map(() => '?').join(',');
        const values = finalValidData.map(item => fields.map(field => item[field]));

        await dbClient.batchInsert(
          `INSERT OR IGNORE INTO new_leader_report (${fields.join(', ')}) VALUES (${placeholders})`,
          values
        );

        ElMessage.success(`成功导入${finalValidData.length}条新提拔领导人员报告数据`);
        importDialogVisible.value = false;
        getReportList(); // 重新加载列表
      } catch (dbError) {
        console.error('数据库导入失败:', dbError);
        ElMessage.error(`导入失败：${dbError.message}`);
      }
    };
  } catch (error) {
    console.error('导入失败:', error);
    ElMessage.error('导入失败: ' + error.message);
  }
};
</script>

<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f5f6f7;
}

.card-container {
  flex: 1;
  padding: 20px;
  box-sizing: border-box;
}

.full-height-card {
  height: 99%;
  display: flex;
  flex-direction: column;
  background: #f5f6f7;
  margin: 10px;
}

:deep(.el-card__header) {
  min-height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  flex-shrink: 0;
  background: white;
}

:deep(.el-card__body) {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: #f5f6f7;
}

.table-wrapper {
  margin: 20px 20px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  max-height: calc(100vh - 300px);
  overflow-y: auto;
}

.full-height-table {
  width: 100%;
}

.action-bar {
  margin: 15px 15px 15px 15px;
  padding: 5px;
}

.button-group {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

:deep(.el-input__wrapper) {
  width: 100%;
}

.action-bar .el-button {
  min-width: 100px;
  height: 40px;
  font-size: 16px;
  font-weight: 500;
}

.action-bar .el-input {
  margin-right: 10px;
}

@media (max-width: 768px) {
  .action-bar .el-row {
    flex-direction: column;
    gap: 15px;
  }
  
  .action-bar .el-col {
    width: 100%;
  }
  
  .button-group {
    justify-content: center;
  }
}

.card-container {
  flex: 1;
  padding: 10px 20px 20px 20px;
  box-sizing: border-box;
}

.table-wrapper {
  margin: 10px 0;
}

:deep(.el-table__header th .cell) {
  font-weight: bold;
  font-size: 18px;
  color: #1d1d1da9;
}

:deep(.el-table__body td .cell) {
  font-size: 18px;
}

/* 分页样式 */
.pagination-container {
  display: flex;
  justify-content: center;
  padding: 16px;
  background: white;
  border-top: 1px solid #ebeef5;
}

/* 分割线样式优化 */
:deep(.el-divider__text) {
  font-weight: bold;
  color: #409EFF;
}

/* 表单标签样式 */
:deep(.el-form-item__label) {
  font-weight: 500;
}
</style>